<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>(未命名)-登录</title>
		<script type="text/ecmascript" src="/accHestia/lib/jqgrid/js/jquery.min.js"></script>
		<script src="/accHestia/lib/jquery_ui/1.12.1/jquery-ui.js"></script>
		<script src="/accHestia/src/view/js/md5.js"></script>
		<script src="/accHestia/src/view/js/rpc.js"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="/accHestia/lib/jquery_ui/1.12.1/jquery-ui.css" />
		<link rel="stylesheet" href="/accHestia/src/view/css/login.css" />
		
		<style type="text/css">
            #idlg_reg input {
            	 display:block; 
            }
            #idlg_reg label { 
            	margin-top:0.5em;
            }
            #idlg_reg input {
            	width: 95%;
            }
        </style>
        
		<script>
            var $cnt = 0;
            var $mytm;
            function startTime() {
                $cnt++;
                if (2 == $cnt) {
                    $cnt = 0;
                    clearTimeout($mytm);
                    $("#tmr").text("");
                }
            }

            function callback() {
                $mytm = setInterval("startTime()",1000);
                $("#iid").focus();
            }
            
            function login_callback(ps_data){
                if ("OK" == ps_data["result"]) {
                    window.location = '/accHestia/';
                } else {
                    $("#tmr").text("用户名或密码错误");
                    $("#iid").select();
                    $( "#dialog" ).effect( "shake", {}, 500, callback );
                }
            }
                        
            function acc_login(){
                var req_data = {
                    loginId:$("#iid").val(),
                    pwd:hex_md5($("#ipwd").val()),
                };
                call_rpc("req_login", req_data, login_callback);
            }
            $(function() {
                $("#dialog").dialog(
                    {
                        closeOnEscape: false,
                        beforeclose: function (event, ui) { return false; },
                        dialogClass: "noclose"
                    }
                );
            });

            function check_unique_call_back(ps_data){
                if ("OK" == ps_data["result"]) {
                    $("#iUidErr").css("color", "green");
                    $("#iUidErr").text("恭喜,用户名可用");
                } else {
                    $("#iUidErr").css("color", "red");
                    $("#iUidErr").text("此用户名已注册..");
                }
            }

            function regist_new_callback(ps_data){
                if ("OK" == ps_data["result"]) {
                    $("#idlg_reg").dialog("close");
                    alert("恭喜,注册已成功!");
                } else {
                    alert("注册失败");
                }
            }
            
			$(function(){
				$("#iLogin").click(acc_login);
				$("#iid").keydown(function(event){
				  if (13 == event.which){
					$("#ipwd").focus();
				  }
				});
				$("#ipwd").keydown(function(event){
				  if (13 == event.which){
					acc_login();
				  }
				});

				$("#i_uid_new").change(function(){
                    var req_data = {
                        loginId:$("#i_uid_new").val(),
                    };
                    call_rpc("uid_unique_check", req_data, check_unique_call_back);
				});

                var dlg = $("#idlg_reg").dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        Add: function() {
                            var req_data = {
                                loginId:$("#i_uid_new").val(),
                                pwd:hex_md5($("#i_pwd_new").val()),
                                email:$("#i_email_new").val(),
                            };
                            call_rpc("regist_new", req_data, regist_new_callback);
                        },
                        Cancel: function() {
                            $(this).dialog("close");
                        }
                    },
                    close: function() {
                        $("iid").select();
                    }
                });
                
                $("#iNewUsr").click(function(){
                	document.getElementById("ifrm_new").reset();
                	$("#iUidErr").text("");
                	dlg.dialog("open");
                });
				$("#iid").select();
			});
		</script>
	</head>
	<body>
        <div style="font-size:14px;">
          <ul>
	         <li>请使用最新的chrome或firefox,IE9及以上(推荐IE11及以上)</li>
	         <li>初期预置两个账号,一个是系统管理账号 id:su, pwd:初始化的密码为1234, 另外一个是普通操作员 id:co, pwd:1234,以方便测试.</li>
	      </ul>
	     </div>

		<div id="dialog" title="用户登录">
			<table>
				<tr>
					<td>id</td>
					<td><input type="text" id="iid" value="usrID"/></td>
				</tr>
				<tr>
					<td>pwd</td>
					<td><input type="password" id="ipwd"/></td>
				</tr>
				<tr style="text-align:center;">
					<td colspan="2">
						<button id="iNewUsr">注册</button>
						<button id="iLogin">登录</button>
					</td>
				</tr>
				<tr>
				<td id="tmr" style="color:red;" colspan="2"></td>
				</tr>
			</table>
		</div>
        <div id="idlg_reg" title="register users">
            <form id="ifrm_new">
                <fieldset class="ui-helper-reset">
                    <label for="i_uid_new">用户名</label>
                    <input type="text" id="i_uid_new" value="" class="ui-widget-content ui-corner-all"/>
                    <label for="i_uid_new" id="iUidErr" style="color:red;"></label>
                    
                    <label for="i_pwd_new">密码</label>
                    <input type="password" id="i_pwd_new" class="ui-widget-content ui-corner-all"/>
                    <label for="i_repwd">重复密码</label>
                    <input type="password" id="i_repwd" class="ui-widget-content ui-corner-all"/>
                    <label for="i_email_new">email</label>
                    <input type="text" id="i_email_new" class="ui-widget-content ui-corner-all"/>
                </fieldset>
            </form>
        </div>
	</body>
</html>